<template>
  <BasicDrawer
    v-bind="$attrs"
    width="100%"
    @register="register"
    showFooter
    :title="setName"
    class="code-drawer"
    @ok="handleSubmit"
  >
    <template #footer>
      <a-button @click="closeDrawer">关闭</a-button>
      <a-button
        :loading="loading"
        style="background-color: green; color: #fff"
        @click="handleTest"
        >测试</a-button
      >
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </template>
    <!-- 暂时么有grovvy专用的语言支持 -->
    <MonacoEditor v-model:value="code" language="python" style="{ height: 100% }"/>
  </BasicDrawer>
  <ResultModal @register="registerResultModal" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicDrawer, useDrawer, useDrawerInner } from '@/components/Drawer';
import { testData } from '@/api/sys/dev/reportDataSetManager';
import { MonacoEditor } from '@/components/Monaco';
import ResultModal from './ResultModal.vue';

const emit = defineEmits(['success', 'register']);
const code = ref('');
let params = [];
const loading = ref(false);
const setName = ref('');
const [register, { closeDrawer, changeLoading }] = useDrawerInner(
  async (data) => {
    setName.value = '';
    code.value = data.script;
    params = data.params;
    setName.value = data.setName;
  }
);

const [registerResultModal, { openDrawer }] = useDrawer();
const handleSubmit = () => {
  changeLoading(false);
  emit('success', code.value);
  closeDrawer();
};
const handleTest = async () => {
  loading.value = true;
  try {
    const result = await testData({ dynSentence: code.value, params });
    openDrawer(true, result);
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="less">
.scroll-container .scrollbar__view {
  height: 100% !important;
  box-sizing: border-box;
  > div {
    height: 100% !important;
  }
}
</style>
